<template>
  <div class="vehicle-container">
    <div class="page-header">
      <div class="header-title">
        <h2>车辆管理</h2>
        <span class="subtitle">管理系统中的车辆信息</span>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="handleAddVehicle">
          <el-icon><Plus /></el-icon>新增车辆
        </el-button>
        <el-button @click="handleImport">
          <el-icon><Upload /></el-icon>批量导入
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>导出数据
        </el-button>
      </div>
    </div>

    <!-- 搜索过滤区 -->
    <el-card class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="车牌号">
          <el-input v-model="filterForm.plateNumber" placeholder="请输入车牌号" clearable></el-input>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-select v-model="filterForm.type" placeholder="请选择车辆类型" clearable>
            <el-option label="重型卡车" value="heavy"></el-option>
            <el-option label="中型卡车" value="medium"></el-option>
            <el-option label="轻型卡车" value="light"></el-option>
            <el-option label="厢式货车" value="van"></el-option>
            <el-option label="冷藏车" value="refrigerated"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属承运商">
          <el-select v-model="filterForm.carrier" placeholder="请选择承运商" clearable>
            <el-option 
              v-for="carrier in carrierOptions" 
              :key="carrier.value" 
              :label="carrier.label" 
              :value="carrier.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
            <el-option label="空闲" value="idle"></el-option>
            <el-option label="在途" value="intransit"></el-option>
            <el-option label="维修" value="maintenance"></el-option>
            <el-option label="停用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>搜索
          </el-button>
          <el-button @click="resetFilter">
            <el-icon><RefreshRight /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 车辆列表 -->
    <el-card class="table-container">
      <el-table
        v-loading="tableLoading"
        :data="vehicleList"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="车辆ID" width="100"></el-table-column>
        <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
        <el-table-column prop="type" label="车辆类型" width="120">
          <template #default="scope">
            <el-tag :type="getVehicleTypeTag(scope.row.type)">
              {{ getVehicleTypeLabel(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="carrier" label="所属承运商" min-width="180"></el-table-column>
        <el-table-column prop="driver" label="默认驾驶员" width="120"></el-table-column>
        <el-table-column prop="capacity" label="载重(吨)" width="100"></el-table-column>
        <el-table-column prop="volume" label="容积(m³)" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTag(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="当前位置" min-width="180"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="success" size="small" @click="handleTrack(scope.row)">跟踪</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑车辆对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增车辆' : '编辑车辆'"
      width="650px"
    >
      <el-form
        ref="vehicleForm"
        :model="vehicleForm"
        :rules="vehicleRules"
        label-width="120px"
      >
        <el-form-item label="车牌号" prop="plateNumber">
          <el-input v-model="vehicleForm.plateNumber" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型" prop="type">
          <el-select v-model="vehicleForm.type" placeholder="请选择车辆类型" style="width: 100%">
            <el-option label="重型卡车" value="heavy"></el-option>
            <el-option label="中型卡车" value="medium"></el-option>
            <el-option label="轻型卡车" value="light"></el-option>
            <el-option label="厢式货车" value="van"></el-option>
            <el-option label="冷藏车" value="refrigerated"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属承运商" prop="carrierId">
          <el-select v-model="vehicleForm.carrierId" placeholder="请选择承运商" style="width: 100%">
            <el-option 
              v-for="carrier in carrierOptions" 
              :key="carrier.value" 
              :label="carrier.label" 
              :value="carrier.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认驾驶员" prop="driverId">
          <el-select v-model="vehicleForm.driverId" placeholder="请选择驾驶员" style="width: 100%">
            <el-option 
              v-for="driver in driverOptions" 
              :key="driver.value" 
              :label="driver.label" 
              :value="driver.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="载重(吨)" prop="capacity">
          <el-input-number v-model="vehicleForm.capacity" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="容积(m³)" prop="volume">
          <el-input-number v-model="vehicleForm.volume" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="车辆状态" prop="status">
          <el-select v-model="vehicleForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="空闲" value="idle"></el-option>
            <el-option label="在途" value="intransit"></el-option>
            <el-option label="维修" value="maintenance"></el-option>
            <el-option label="停用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆照片" prop="photos">
          <el-upload
            action="#"
            list-type="picture-card"
            :http-request="uploadVehiclePhotos"
            :file-list="vehicleForm.photos"
            :limit="5"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="vehicleForm.remarks"
            type="textarea"
            rows="3"
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitVehicleForm">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 车辆跟踪对话框 -->
    <el-dialog v-model="trackDialogVisible" title="车辆实时跟踪" width="800px" destroy-on-close>
      <div class="track-container">
        <div class="track-map-container" ref="trackMap"></div>
        <div class="track-info">
          <div class="track-vehicle-info">
            <h3>{{ currentVehicle?.plateNumber }}</h3>
            <p>类型: {{ getVehicleTypeLabel(currentVehicle?.type) }}</p>
            <p>驾驶员: {{ currentVehicle?.driver }}</p>
            <p>状态: <el-tag :type="getStatusTag(currentVehicle?.status)">{{ getStatusLabel(currentVehicle?.status) }}</el-tag></p>
          </div>
          <div class="track-location-info">
            <h3>位置信息</h3>
            <p><i class="el-icon-location"></i> 当前位置: {{ currentVehicle?.location }}</p>
            <p><i class="el-icon-time"></i> 更新时间: {{ currentVehicle?.lastUpdateTime || '2025-03-19 15:45:22' }}</p>
            <p><i class="el-icon-odometer"></i> 行驶速度: {{ currentVehicle?.speed || '0' }} km/h</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Upload, Download, Search, RefreshRight, Location, Timer } from '@element-plus/icons-vue'

// 表格加载状态
const tableLoading = ref(false)

// 选中的车辆
const selectedVehicles = ref([])

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 过滤表单
const filterForm = reactive({
  plateNumber: '',
  type: '',
  carrier: '',
  status: ''
})

// 车辆表单
const vehicleForm = reactive({
  id: '',
  plateNumber: '',
  type: '',
  carrierId: '',
  driverId: '',
  capacity: 0,
  volume: 0,
  status: 'idle',
  photos: [],
  remarks: ''
})

// 车辆表单验证规则
const vehicleRules = {
  plateNumber: [
    { required: true, message: '请输入车牌号', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5][A-Z][A-Z0-9]{5}$/, message: '车牌号格式不正确', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择车辆类型', trigger: 'change' }
  ],
  carrierId: [
    { required: true, message: '请选择所属承运商', trigger: 'change' }
  ],
  capacity: [
    { required: true, message: '请输入载重', trigger: 'blur' }
  ],
  volume: [
    { required: true, message: '请输入容积', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择车辆状态', trigger: 'change' }
  ]
}

// 对话框控制
const dialogVisible = ref(false)
const dialogType = ref('add') // 'add' 或 'edit'
const trackDialogVisible = ref(false)
const currentVehicle = ref(null)
const trackMap = ref(null)
let mapInstance = null

// 承运商选项
const carrierOptions = [
  { value: 'carrier1', label: '上海运输集团有限公司' },
  { value: 'carrier2', label: '广州货运服务有限公司' },
  { value: 'carrier3', label: '北京物流科技有限公司' }
]

// 驾驶员选项
const driverOptions = [
  { value: 'driver1', label: '张三' },
  { value: 'driver2', label: '李四' },
  { value: 'driver3', label: '王五' },
  { value: 'driver4', label: '赵六' }
]

// 车辆列表数据
const vehicleList = ref([
  {
    id: 'VEH-001',
    plateNumber: '京A12345',
    type: 'heavy',
    carrier: '上海运输集团有限公司',
    carrierId: 'carrier1',
    driver: '张三',
    driverId: 'driver1',
    capacity: 30,
    volume: 50,
    status: 'idle',
    location: '北京市朝阳区建国路88号',
    lastUpdateTime: '2025-03-14 13:45:22',
    speed: 0,
    photos: [
      { name: '车辆照片1.jpg', url: 'http://example.com/vehicle1.jpg' }
    ],
    remarks: '新车，状态良好'
  },
  {
    id: 'VEH-002',
    plateNumber: '沪B67890',
    type: 'medium',
    carrier: '广州货运服务有限公司',
    carrierId: 'carrier2',
    driver: '李四',
    driverId: 'driver2',
    capacity: 15,
    volume: 30,
    status: 'intransit',
    location: '上海市浦东新区张江高科技园区',
    lastUpdateTime: '2025-03-14 14:15:10',
    speed: 65,
    photos: [
      { name: '车辆照片2.jpg', url: 'http://example.com/vehicle2.jpg' }
    ],
    remarks: '正在执行上海至南京的运输任务'
  },
  {
    id: 'VEH-003',
    plateNumber: '粤C12345',
    type: 'refrigerated',
    carrier: '广州货运服务有限公司',
    carrierId: 'carrier2',
    driver: '王五',
    driverId: 'driver3',
    capacity: 10,
    volume: 25,
    status: 'maintenance',
    location: '广州市天河区珠江新城',
    lastUpdateTime: '2025-03-14 10:30:45',
    speed: 0,
    photos: [
      { name: '车辆照片3.jpg', url: 'http://example.com/vehicle3.jpg' }
    ],
    remarks: '冷藏系统维修中，预计3天后恢复使用'
  }
])

// 获取车辆类型标签样式
const getVehicleTypeTag = (type) => {
  const typeMap = {
    'heavy': 'danger',
    'medium': 'warning',
    'light': 'success',
    'van': 'info',
    'refrigerated': 'primary'
  }
  return typeMap[type] || 'info'
}

// 获取车辆类型标签文本
const getVehicleTypeLabel = (type) => {
  const typeMap = {
    'heavy': '重型卡车',
    'medium': '中型卡车',
    'light': '轻型卡车',
    'van': '厢式货车',
    'refrigerated': '冷藏车'
  }
  return typeMap[type] || '未知'
}

// 获取状态标签样式
const getStatusTag = (status) => {
  const statusMap = {
    'idle': 'success',
    'intransit': 'primary',
    'maintenance': 'warning',
    'disabled': 'info'
  }
  return statusMap[status] || 'info'
}

// 获取状态标签文本
const getStatusLabel = (status) => {
  const statusMap = {
    'idle': '空闲',
    'intransit': '在途',
    'maintenance': '维修',
    'disabled': '停用'
  }
  return statusMap[status] || '未知'
}

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedVehicles.value = selection
}

// 处理搜索
const handleSearch = () => {
  // 实际应用中应该调用API进行搜索
  tableLoading.value = true
  setTimeout(() => {
    tableLoading.value = false
    pagination.currentPage = 1
    ElMessage.success('搜索完成')
  }, 500)
}

// 重置过滤条件
const resetFilter = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  handleSearch()
}

// 处理新增车辆
const handleAddVehicle = () => {
  dialogType.value = 'add'
  Object.keys(vehicleForm).forEach(key => {
    vehicleForm[key] = key === 'photos' ? [] : (key === 'capacity' || key === 'volume' ? 0 : (key === 'status' ? 'idle' : ''))
  })
  dialogVisible.value = true
}

// 处理编辑车辆
const handleEdit = (row) => {
  dialogType.value = 'edit'
  Object.keys(vehicleForm).forEach(key => {
    vehicleForm[key] = row[key]
  })
  dialogVisible.value = true
}

// 处理跟踪
const handleTrack = (row) => {
  currentVehicle.value = row
  trackDialogVisible.value = true
  
  // 在对话框打开后初始化地图
  setTimeout(() => {
    initTrackMap()
  }, 300)
}

// 加载高德地图脚本
const loadAMapScript = () => {
  return new Promise((resolve, reject) => {
    // 如果已经加载过，直接返回
    if (window.AMap) {
      resolve(window.AMap)
      return
    }
    
    // 设置安全配置 - 这一步必须在加载脚本前完成
    window._AMapSecurityConfig = {
      securityJsCode: import.meta.env.VITE_AMAP_SECURITY_CODE
    }
    
    // 创建script标签直接加载地图API
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.async = true
    // 使用JavaScript API Web服务密钥
    script.src = `https://webapi.amap.com/maps?v=2.0&key=${import.meta.env.VITE_AMAP_JS_KEY}`
    
    script.onerror = (e) => {
      console.error('高德地图脚本加载失败:', e)
      reject(new Error('高德地图脚本加载失败'))
    }
    
    script.onload = () => {
      // 延迟检查AMap对象，确保它已完全初始化
      setTimeout(() => {
        if (window.AMap) {
          console.log('高德地图脚本加载成功')
          resolve(window.AMap)
        } else {
          console.error('高德地图脚本加载成功但AMap对象不存在')
          reject(new Error('高德地图脚本加载成功但AMap对象不存在'))
        }
      }, 100)
    }
    
    document.head.appendChild(script)
  })
}

// 初始化跟踪地图
const initTrackMap = async () => {
  if (!trackMap.value) {
    console.error('地图容器不存在')
    return
  }
  
  try {
    console.log('开始加载高德地图API')
    // 加载高德地图API
    const AMap = await loadAMapScript()
    console.log('高德地图API加载成功', AMap)
    
    // 模拟获取车辆位置数据（实际应用中应该从API获取）
    const vehiclePosition = getVehiclePosition(currentVehicle.value)
    console.log('车辆位置:', vehiclePosition)
    
    // 确保地图容器有正确的尺寸
    trackMap.value.style.width = '100%'
    trackMap.value.style.height = '350px'
    
    // 创建地图实例 - 使用与示例代码相同的简单方式
    mapInstance = new AMap.Map(trackMap.value, {
      zoom: 14,
      center: vehiclePosition,
      viewMode: '2D'  // 设置地图模式
    })
    
    console.log('地图实例创建成功', mapInstance)
    
    // 添加车辆标记
    const marker = new AMap.Marker({
      position: vehiclePosition,
      icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
      offset: new AMap.Pixel(-13, -30)
    })
    
    // 添加信息窗体
    const infoWindow = new AMap.InfoWindow({
      content: `
        <div class="info-window">
          <div class="info-title">
            <span class="plate-number">${currentVehicle.value.plateNumber}</span>
            <span class="status">${getStatusLabel(currentVehicle.value.status)}</span>
          </div>
          <div class="info-content">
            <p>驾驶员: ${currentVehicle.value.driver || '未指定'}</p>
            <p>当前位置: ${currentVehicle.value.location || '广州市天河区珠江新城'}</p>
            <p>更新时间: ${currentVehicle.value.lastUpdateTime || '2025-03-19 15:45:22'}</p>
          </div>
        </div>
      `,
      offset: new AMap.Pixel(0, -30)
    })
    
    // 点击标记时显示信息窗体
    marker.on('click', () => {
      infoWindow.open(mapInstance, vehiclePosition)
    })
    
    // 将标记添加到地图
    marker.setMap(mapInstance)
    
    // 自动打开信息窗体
    infoWindow.open(mapInstance, vehiclePosition)
    
  } catch (e) {
    console.error('地图加载失败:', e)
    ElMessage.error('地图加载失败，请检查网络连接和API密钥配置')
  }
}

// 根据车辆信息获取位置坐标
const getVehiclePosition = (vehicle) => {
  // 实际应用中应该从API获取真实坐标
  // 这里根据车辆ID模拟不同位置
  const positions = {
    'VEH-001': [121.473701, 31.230416], // 上海
    'VEH-002': [113.264385, 23.129112], // 广州
    'VEH-003': [114.085947, 22.547], // 深圳
    'default': [116.397428, 39.90923] // 北京（默认）
  }
  
  return positions[vehicle?.id] || positions['default']
}

// 对话框关闭时销毁地图
const onTrackDialogClosed = () => {
  if (mapInstance) {
    mapInstance.destroy()
    mapInstance = null
  }
}

// 监听对话框关闭事件
watch(trackDialogVisible, (newVal) => {
  if (!newVal) {
    onTrackDialogClosed()
  }
})

// 处理删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除车辆 "${row.plateNumber}" 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实际应用中应该调用API删除数据
    const index = vehicleList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      vehicleList.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    // 取消删除
  })
}

// 处理导入
const handleImport = () => {
  ElMessage.info('导入功能开发中...')
}

// 处理导出
const handleExport = () => {
  if (selectedVehicles.value.length === 0) {
    ElMessage.warning('请先选择要导出的车辆')
    return
  }
  
  ElMessage.success(`已选择 ${selectedVehicles.value.length} 辆车辆进行导出`)
  // 实际应用中应该调用API导出数据
}

// 上传车辆照片
const uploadVehiclePhotos = (options) => {
  // 模拟上传
  setTimeout(() => {
    const file = options.file
    vehicleForm.photos.push({
      name: file.name,
      url: URL.createObjectURL(file)
    })
    options.onSuccess()
  }, 500)
}

// 提交车辆表单
const submitVehicleForm = () => {
  vehicleForm.value.validate(valid => {
    if (valid) {
      // 实际应用中应该调用API保存数据
      if (dialogType.value === 'add') {
        // 新增车辆
        const newVehicle = {
          ...vehicleForm,
          id: `VEH-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,
          carrier: carrierOptions.find(item => item.value === vehicleForm.carrierId)?.label || '',
          driver: driverOptions.find(item => item.value === vehicleForm.driverId)?.label || '',
          location: '未知',
          lastUpdateTime: new Date().toLocaleString(),
          speed: 0
        }
        vehicleList.value.unshift(newVehicle)
        ElMessage.success('添加车辆成功')
      } else {
        // 编辑车辆
        const index = vehicleList.value.findIndex(item => item.id === vehicleForm.id)
        if (index !== -1) {
          vehicleList.value[index] = { 
            ...vehicleList.value[index], 
            ...vehicleForm,
            carrier: carrierOptions.find(item => item.value === vehicleForm.carrierId)?.label || '',
            driver: driverOptions.find(item => item.value === vehicleForm.driverId)?.label || ''
          }
          ElMessage.success('更新车辆信息成功')
        }
      }
      dialogVisible.value = false
    } else {
      return false
    }
  })
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pagination.pageSize = size
  // 重新加载数据
}

// 处理页码变化
const handleCurrentChange = (page) => {
  pagination.currentPage = page
  // 重新加载数据
}

onMounted(() => {
  // 实际应用中应该调用API加载数据
  tableLoading.value = true
  setTimeout(() => {
    pagination.total = vehicleList.value.length
    tableLoading.value = false
  }, 500)
})

onUnmounted(() => {
  // 销毁地图实例
  if (mapInstance) {
    mapInstance.destroy()
  }
})
</script>

<style scoped>
.vehicle-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.track-container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.track-map-container {
  width: 100%;
  height: 350px !important;
  margin-bottom: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.track-info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.track-vehicle-info, .track-location-info {
  flex: 1;
  padding: 10px;
}

.track-vehicle-info h3, .track-location-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}

.track-vehicle-info p, .track-location-info p {
  margin: 8px 0;
  color: #606266;
}

/* 信息窗体样式 */
:deep(.info-window) {
  padding: 10px;
  min-width: 200px;
}

:deep(.info-title) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.plate-number) {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

:deep(.status) {
  padding: 2px 6px;
  background-color: #67c23a;
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

:deep(.info-content p) {
  margin: 5px 0;
  font-size: 13px;
  color: #606266;
}
</style>
